<template>
	<view class="wode">
		<image src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F0142da5d2005e7a801213763f33ce1.jpg%403000w_1l_0o_100sh.jpg&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1650088516&t=0d2dbc8b7351ba7e8c3efb92ce37a1ab"></image>
		<view class="wode_denglu">
			<view class="user_head">
				<image v-if="n===0" src="../../static/头像.png"></image>
				<image v-else :src="usermessage.head"></image>
				<button v-if="n === 0" open-type="getUserInfo" @getuserinfo="getUserName">未登录</button>
				<view v-else class="user-info">
					<text>Hi</text>
					<text>来自 {{usermessage.city}} 的 {{usermessage.name}}</text>
					<text>喜爱：{{usermessage.drink}}</text>
				</view>
			</view>
		</view>
		<view class="wode_nav">
			<view class="nav_item" v-for="(item,index) in mynavs" :key="index">
				<image :src="item.icon"></image>
				<view>{{item.title}}</view>	
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				code: '',
				usermessage:{},
				n:0,
				mynavs:[
					{
						icon:"/static/wodelogo/信息.png",
						title:'基本信息',
						path:'/pages/goods/goods'
					},
					{
						icon:"/static/wodelogo/已购.png",
						title:'我的已购',
						path:'/pages/contact/contact'
					},
					{
						icon:"/static/wodelogo/茶室.png",
						title:'我的茶室',
						path:'/pages/pics/pics'
					},
					{
						icon:"/static/wodelogo/会员.png",
						title:'会员中心',
						path:'/pages/videos/videos'
					}
				]
			}
		},
		methods: {
			//导航点击处理函数
			mynavItemClick(url){
				uni.navigateTo({
					url
				})
			},
			getUserName(resInfo){
				
				//通过微信小程序获取用户信息传到后端
				const that = this;
				uni.login({
					async success(res) {
						const code = res.code;
						try{
							const payload = {
								code,
								encryptedData: resInfo.detail.encryptedData,
								iv: resInfo.detail.iv
							};
							
							const result = await that.$myRuquest({
								url:'/api/login',
								methods: 'POST',
								data: payload
							});
							//通过后端回传信息到前端
							that.usermessage=result.data.message[0]
							that.n++
							console.log(that.usermessage)
						}catch(error){
							console.error("getUserName request login api error: ", error)
						}
					},
					fail(err) {
						console.error("getUserName login error: ", err)
					}
				})
				
				
			}
		},
	}
</script>

<style lang="scss">
	.wode{
		background: #ccc;
		height: 2000rpx;
		image{
			width: 100%;
		}
		
	}
	.wode_denglu{
		position: relative;		
	}
	.user_head{
		width: 97%;
		height: 250rpx;
		background: #55ff7f;
		border-radius: 20rpx;
		position: absolute;
		display: flex;
		z-index: 100;
		margin-top: -44px;
		left: 50%;
		transform: translateX(-50%);
		
		margin-top: -80rpx;
		image{
			width: 150rpx;
			height: 150rpx;
			margin-left: 20rpx;
			margin-top: 30rpx;
		}
		button{
			width: 200rpx;
			height: 100rpx;
			line-height: 100rpx;
			font-weight:bolder;
			margin: auto 70rpx;
			border-radius: 100rpx;
			background: #598bff;
			
		}
		text{
			color: #598bff;
			line-height: 50rpx;
			display: block;
			font-size: 40rpx;
			margin-top: 2px;
			margin-left: 17rpx;
		}
		text:nth-child(1){
			color: #000;
			font-weight:bolder;
			line-height: 70rpx;
			display: block;
			font-size: 50rpx;
			margin-left: 17rpx;
		}
	}
	.wode_nav{
		width: 97%;
		height: 200rpx;
		background: #fff;
		margin-top: 200rpx;
		margin: 190rpx auto;
		display: flex;
		.nav_item{
			width:25%;
			text-align:center;
			image{
				width: 120rpx;
				height: 120rpx;
				background-color: $shop-color;
				border-radius: 60rpx;
				margin:10px auto;
				line-height: 120rpx;
				font-size: 50rpx;
				color: #fff;
			}
			view{
				margin-top: -20rpx;
				font-size:30rpx;
			}
		}
	}

</style>
